Implementation of storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,17 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+ chromatic-deployment:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v1
+ - name: Install dependencies
+ run: npm ci
+ - name: Prepare Build
+ run: npm run prep
+ - name: Publish to Chromatic
+ uses: chromaui/action@v1
+ with:
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/main.js

@@ -1,54 +1,48 @@
-const path = require('path');
-
 module.exports = {
- core: {
- builder: 'webpack5',
- },
- staticDirs: ['./static'],
+ logLevel: 'debug',
  stories: [
- '../docs/**/*.mdx',
- '../src/components/**/*.stories.@(js|ts|mdx)',
+ '../*.md',
+ '../docs/**/*.stories.mdx',
+ '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'
  ],
  addons: [
- '@storybook/addon-essentials',
- {
- name: '@storybook/addon-postcss',
- options: {
- postcssLoaderOptions: {
- implementation: require('postcss'),
- },
- },
- },
  '@storybook/addon-links',
+ '@storybook/addon-essentials',
  '@storybook/addon-a11y',
+ // {
+ // name: '@storybook/addon-docs',
+ // options: {
+ // sourceLoaderOptions: {
+ // injectStoryParameters: false,
+ // },
+ // },
+ // },
  ],
- webpackFinal: async config => {
- /**
- * Delete the ProgressPlugin from Storybook to remove log file spam.
- */
- const progressKey = config.plugins.findIndex(
- v => v.constructor.name === 'ProgressPlugin'
- );
- config.plugins.splice(progressKey, 1);
-
+ features: {
+ postcss: false,
+ interactionsDebugger: true,
+ buildStoriesJson: true,
+ },
+ framework: '@storybook/web-components',
+ webpackFinal: async (config, { configType }) => {
  config.module.rules.push({
- test: /\.css$/,
+ test: /\.stories\.mdx?$/,
  use: [
  {
- loader: 'postcss-loader',
- options: {
- postcssOptions: {
- plugins: [
- require('postcss-import'),
- require('postcss-preset-env')({ stage: 1 }),
- ],
- },
- },
+ loader: require.resolve('@storybook/source-loader'),
+ options: { parser: 'js' },
  },
  ],
- include: path.resolve(__dirname, '../src/'),
+ enforce: 'pre',
  });
 
+ // config.module.rules.push({
+ // test: /\.css|\.s(c|a)ss$/,
+ // use: [{
+ // loader: 'lit-css-loader',
+ // }],
+ // });
+
  return config;
  },
-};
+}

.storybook/manager.js

@@ -1,6 +1,14 @@
 import { addons } from '@storybook/addons';
-import customTheme from './CustomTheme';
+import { create } from '@storybook/theming';
 
-addons.setConfig({
- theme: customTheme,
+const theme = create({
+ base: 'light',
+ brandTitle: 'Grace Design System',
+ brandUrl: 'https://github.com/Trendyol/grace',
+ colorPrimary: '#F27A1A',
+ colorSecondary: '#F27A1A',
+ fontBase: 'Equinor, sans-serif',
+ fontCode: '"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace'
 });
+
+addons.setConfig({theme});

.storybook/preview.js

@@ -1,30 +1,18 @@
-import customTheme from './CustomTheme';
-import { addParameters } from '@storybook/web-components';
+import { setCustomElementsManifest } from '@storybook/web-components';
+import customElements from '../src/custom-elements.json';
+import '../src/themes/default.css';
 
-addParameters({
- actions: {
- argTypesRegex: '^on[A-Z].*',
- },
+setCustomElementsManifest(customElements);
+
+export const parameters = {
+ actions: { argTypesRegex: "^on[A-Z].*" },
+ viewMode: 'docs',
  controls: {
- expanded: true,
- },
- options: {
- storySort: {
- order: [
- 'Getting Started',
- 'Documentation',
- 'Design Tokens',
- 'Media',
- 'Navigation',
- 'Content',
- 'Templates',
- 'Pages',
- 'Code Examples',
- 'Utility Components',
- ],
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
  },
  },
- docs: {
- theme: customTheme,
- },
-});
+}
+
+// export const decorators = [(Story) => <fwc-theme>{Story()}</fwc-theme>];

docs/design-system/colors.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+
+<Meta title="Design System/Colors" />
+
+# Grace Color Palette
+
+Grace uses a list of defined color with some default values.
+
+<ColorPalette>
+ <ColorItem
+ title="--gr-color-primary"
+ subtitle="Primary Color"
+ colors={{ Primary: '#F27A1A', Hover: '#EF6114' }}
+ />
+ <ColorItem
+ title="--gr-color-secondary"
+ subtitle="Secondary Color"
+ colors={{ Secondary: '#273142', Hover: '#0F131A' }}
+ />
+ <ColorItem 
+ title="--gr-color-content" 
+ subtitle="Content Colors" 
+ colors={{
+ '--primary': '#273142', 
+ '--secondary': '#6E7787',
+ '--tertiary': '#95A1B5',
+ '--passive': '#AFBBCA',
+ }} 
+ />
+</ColorPalette>

docs/design-system/iconography.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
+
+<Meta title="Design System/Iconography" />
+
+# Iconography
+
+<IconGallery>
+ <IconItem name="mobile">
+ <p>Test</p>
+ </IconItem>
+</IconGallery>

docs/design-system/typography.stories.mdx

@@ -0,0 +1,66 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+
+<Meta
+ title="Design System/Typography"
+ parameters={{
+ viewMode: 'docs',
+ previewTabs: {
+ canvas: {
+ hidden: true,
+ },
+ },
+ }}
+/>
+
+# Grace Typography
+
+export const typography = {
+ type: {
+ primary: '"Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif',
+ },
+ weight: {
+ light: '300',
+ regular: '400',
+ medium: '500',
+ semiabold: '600',
+ bold: '700',
+ },
+ size: {
+ s1: 8,
+ s2: 10,
+ s3: 12,
+ m1: 14,
+ m2: 16,
+ m3: 20,
+ l1: 24,
+ l2: 28,
+ l3: 32,
+ l4: 48,
+ l5: 64,
+ },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+**Font:** Rubik
+
+**Weights:** 300(light), 400(regular), 500(medium), 600(semibold), 700(bold)
+
+<Typeset
+ fontSizes={[
+ Number(typography.size.s1),
+ Number(typography.size.s2),
+ Number(typography.size.s3),
+ Number(typography.size.m1),
+ Number(typography.size.m2),
+ Number(typography.size.m3),
+ Number(typography.size.l1),
+ Number(typography.size.l2),
+ Number(typography.size.l3),
+ Number(typography.size.l4),
+ Number(typography.size.l5),
+ ]}
+ fontWeight={typography.weight.bold}
+ sampleText={SampleText}
+ fontFamily={typography.type.primary}
+/>