diff --git a/.github/workflows/build-figma-tokens.yml b/.github/workflows/build-figma-tokens.yml
new file mode 100644
index 000000000..5c89e2b46
--- /dev/null
+++ b/.github/workflows/build-figma-tokens.yml
@@ -0,0 +1,62 @@
+name: Generate scss vars from figma tokens
+
+on:
+ push:
+ branches:
+ - update-figma-tokens
+ paths:
+ - 'figma-tokens/input/**'
+
+jobs:
+ build_tokens:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v2
+
+ # Configuring Node.js Environment
+ - name: Setup Node.js environment
+ uses: actions/setup-node@v2.4.0
+
+ # Setting dependencies
+ - name: Install dependencies
+ run: npm ci
+
+ # Token conversion using token-transformer
+ - name: Transform Figma tokens
+ run: npx token-transformer figma-tokens/input/tokens.json figma-tokens/transformed-tokens/tokens-transformed.json
+
+ # Run script for Style Dictionary, convert JSON to SCSS
+ - name: Build Figma tokens to SCSS
+ run: npm run build-tokens
+
+ # Create or update the `update-figma-tokens` branch
+ - name: Create or update branch
+ run: |
+ git config user.name "github-actions[bot]"
+ git config user.email "github-actions[bot]@users.noreply.github.com"
+
+ git add stories/assets/scss/figma-scss/_figma-variables.scss figma-tokens/transformed-tokens/tokens-transformed.json
+ git commit -m "Save changes in the branch" || echo "No changes to commit"
+
+ # Push changes to `update-figma-tokens` branch
+ - name: Push changes
+ run: |
+ git push origin ${{ github.ref_name }} || echo "No changes to push"
+
+ # Automatic pull request
+ - name: Create Pull Request
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ run: |
+ PR_DATA=$(jq -n \
+ --arg title "Update SCSS variables from Figma tokens" \
+ --arg body "This PR updates SCSS variables based on the latest Figma tokens." \
+ --arg head "${GITHUB_REF#refs/heads/}" \
+ --arg base "develop" \
+ '{title: $title, body: $body, head: $head, base: $base}')
+
+ curl -s -X POST -H "Authorization: token $GITHUB_TOKEN" \
+ -H "Accept: application/vnd.github.v3+json" \
+ https://api.github.com/repos/${{ github.repository }}/pulls \
+ -d "$PR_DATA"
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 000000000..e69de29bb
diff --git a/.storybook/main.js b/.storybook/main.js
index 37d69ea27..0af655c6f 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,18 +1,26 @@
const path = require('path');
-const config = {
+export default {
staticDirs: ['../stories/assets'],
stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'],
-
- addons: ['@storybook/addon-links', {
- name: '@storybook/addon-essentials',
- options: {
- actions: false, // 👈 disable the actions addon
+ addons: [
+ '@storybook/addon-links',
+ {
+ name: '@storybook/addon-essentials',
+ options: {
+ actions: false, // 👈 disable the actions addon
+ },
},
- }, // 'storybook-addon-rtl',
- '@storybook/blocks', '@storybook/addon-a11y', '@storybook/react-webpack5', // '@chromatic-com/storybook',
- '@storybook/addon-webpack5-compiler-babel', '@whitespace/storybook-addon-html'],
-
+ // 'storybook-addon-rtl',
+ '@storybook/blocks',
+ '@storybook/addon-a11y',
+ '@storybook/react-webpack5',
+ // '@chromatic-com/storybook',
+ '@storybook/addon-webpack5-compiler-babel',
+ '@whitespace/storybook-addon-html',
+ '@storybook/addon-designs',
+ 'storybook-addon-sass-postcss',
+ ],
webpackFinal: async config => {
config.resolve.alias = {
...config.resolve.alias,
@@ -21,7 +29,7 @@ const config = {
config.module.rules.push({
test: /\.scss$/,
- use: ['style-loader', 'css-loader', { loader: 'sass-loader', options: { implementation: 'sass-embedded', sourceMap: false, sassOptions: { quietDeps: true, silenceDeprecations: ['import', 'global-builtin'] } } }],
+ use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../')
});
@@ -37,16 +45,13 @@ const config = {
return config;
},
-
framework: {
- name: '@storybook/react-webpack5'
+ name: '@storybook/react-webpack5',
+ options: {}
},
-
+ // env: config => ({
+ // ...config,
+ // CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920]
+ // }),
docs: {},
-
- typescript: {
- reactDocgen: 'react-docgen-typescript'
- }
};
-
-export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index fef8d12f8..10716c6c6 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,5 +1,5 @@
-
-
+
+