diff --git a/sb/.storybook/tsconfig.json b/sb/.storybook/tsconfig.json index 84d7e74..fc8a2fd 100644 --- a/sb/.storybook/tsconfig.json +++ b/sb/.storybook/tsconfig.json @@ -3,7 +3,14 @@ "compilerOptions": { "types": ["node"], "allowSyntheticDefaultImports": true, - "resolveJsonModule": true + "resolveJsonModule": true, + "baseUrl": "../", + "paths": { + "sae-lib/*": [ + "../my-workspace/dist/sae-lib/*", + "../my-workspace/projects/sae-lib/*" + ] + } }, "exclude": ["../src/test.ts", "../src/**/*.spec.ts"], "include": ["../src/**/*.stories.*", "./preview.ts"], diff --git a/sb/src/app/foundations/couleurs/couleurs.ts b/sb/src/app/foundations/couleurs/couleurs.ts index ea0787f..f36a40f 100644 --- a/sb/src/app/foundations/couleurs/couleurs.ts +++ b/sb/src/app/foundations/couleurs/couleurs.ts @@ -1,15 +1,75 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { ColorDisplay } from 'sae-lib/colours/color-display/color-display'; +import { NgStyle, CommonModule } from '@angular/common'; @Component({ selector: 'app-couleurs', - imports: [], - template: ` -

- couleurs works! -

+ imports: [ColorDisplay, + NgStyle, + CommonModule], + template: ` +
+
+ +
+
+
+ {{name}} +
+
+ {{hexaCode}} +
+
+
+ `, - styles: `` + styles: `:host { + display: inline-block; + width: 100%; + height: 11.4rem; + border-radius: 0.5rem; + border: solid 2px transparent; + box-shadow: 0 5px 10px #eee; + color: #aaa; + max-width: 150px; + + .top { + height: 8rem; + } + + .bottom { + border: solid 1px #aaa; + border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + } + + .name { + color: #333; + } + + .name, .hexacode { + padding: 0.5rem; + background: white; + } + + .hexacode { + padding-top: 0; + font-size: 0.8rem; + } + } + ` }) export class Couleurs { + + @Input() public hexaCode: string = '#cc0000'; + @Input() public name: string = 'color name'; + @Input() public backgroundColor: string = ''; + ngOnInit() { + if (this.hexaCode) { + this.backgroundColor = this.hexaCode + } + } } diff --git a/sb/src/app/foundations/icones/icones.ts b/sb/src/app/foundations/icones/icones.ts index 6c0fa6d..16935bf 100644 --- a/sb/src/app/foundations/icones/icones.ts +++ b/sb/src/app/foundations/icones/icones.ts @@ -4,8 +4,38 @@ import { Component } from '@angular/core'; selector: 'app-icones', imports: [], template: ` -

- icones works! +

+ Icones +

+

+ + + + + + + + +

+

+ + + + + + + + +

+

+ + + + + + + +

`, styles: `` diff --git a/sb/src/app/foundations/typographies/typographies.ts b/sb/src/app/foundations/typographies/typographies.ts index a8a542a..abddf4b 100644 --- a/sb/src/app/foundations/typographies/typographies.ts +++ b/sb/src/app/foundations/typographies/typographies.ts @@ -4,9 +4,59 @@ import { Component } from '@angular/core'; selector: 'app-typographies', imports: [], template: ` +

+ Typographies +

+

+ Titre de niveau 2 +

+

+ Titre de niveau 3 +

+

+ Titre de niveau 4 +

+
+ Titre de niveau 5 +
+
+ Titre de niveau 6 +
+

+ Paragraphe +

+

+ Annotation +

+

+ Note +

typographies works!

+
+ Citation + lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+ + Citation + lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + 
+      Code
+
+
+ Texte aligné à droite +
+
+ Texte aligné au centre +
+
+ Texte aligné à gauche +
+
+ Titre principal +
`, styles: `` }) diff --git a/sb/src/stories/composants/tags-chips.stories.ts b/sb/src/stories/composants/tags-chips.stories.ts index 21feb80..773b1f4 100644 --- a/sb/src/stories/composants/tags-chips.stories.ts +++ b/sb/src/stories/composants/tags-chips.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { TagsChips } from '../../app/composants/tags-chips/tags-chips'; +import { Index as TogglesIndex } from 'sae-lib/toggles/index/index'; const meta: Meta = { title: 'Components/Composants/Tags Chips', @@ -11,4 +12,18 @@ type Story = StoryObj; export const Default: Story = { render: () => ({}) }; +export const WithToggle: Story = { + render: () => ({ + template: ` +
+ + +
+ `, + moduleMetadata: { + imports: [TogglesIndex] + } + }) +}; + diff --git a/sb/src/stories/foundations/color-display.stories.ts b/sb/src/stories/foundations/color-display.stories.ts new file mode 100644 index 0000000..71090c2 --- /dev/null +++ b/sb/src/stories/foundations/color-display.stories.ts @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from '@storybook/angular'; +import { Couleurs } from 'src/app/foundations/couleurs/couleurs'; + +const meta: Meta = { + title: 'Foundations/Couleurs/Color Display', + component: Couleurs, + tags: ['autodocs'], + argTypes: { + hexaCode: { control: 'text' }, + name: { control: 'text' }, + } +}; + +export default meta; +type Story = StoryObj; + +export const Example: Story = { + render: (args) => ({ props: args }), + args: { + hexaCode: '#165DFF', + name: 'Primary 600' + } +}; + + diff --git a/sb/src/stories/foundations/typo-index.stories.ts b/sb/src/stories/foundations/typo-index.stories.ts new file mode 100644 index 0000000..e5e0c52 --- /dev/null +++ b/sb/src/stories/foundations/typo-index.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/angular'; +import { Index as TypoIndex } from 'sae-lib/typo/index/index'; +import {Typographies} from '../../app/foundations/typographies/typographies'; + +const meta: Meta = { + title: 'Foundations/Typographies/Index', + component: Typographies, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { render: () => ({}) }; + + diff --git a/sb/tsconfig.app.json b/sb/tsconfig.app.json index 264f459..a454700 100644 --- a/sb/tsconfig.app.json +++ b/sb/tsconfig.app.json @@ -4,7 +4,14 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": [], + "baseUrl": "./", + "paths": { + "sae-lib/*": [ + "../my-workspace/dist/sae-lib/*", + "../my-workspace/projects/sae-lib/*" + ] + } }, "include": [ "src/**/*.ts"